<template>
    <div class="bg_write"
        style="position:relative">
        <el-row>
            <el-col :span="24"
                class="content_title">
                <el-col :span="12">
                    <HeadTitle></HeadTitle>
                </el-col>
                <el-col :span="12">
                </el-col>
            </el-col>
        </el-row>
        <el-row class="home ">
            <el-col :span="24"
                class="home_box ">
                <div class="phone">
                    <div class="phone_top">
                        <img src="./../../assets/img/home/phone_header.png"
                            alt="" />
                    </div>
                    <div class="container member_bj ">
                        <div class="member_shop_top">
                            <div class="member_shop_top_bj"
                                @click="show_part('top')">
                                <img :src="$fnc.getImgUrl(vip.background)"
                                    alt="" />
                            </div>
                            <div class="member_shop_top_upgrade"
                                v-if="is_upgrade == 1">
                                <div class="upgrade_top_info">
                                    <img src="./../../assets/img/ava.jpg"
                                        alt="" />
                                    <span>用户昵称</span>
                                    <span>等级</span>
                                </div>
                            </div>
                            <div class="member_shop_top_person"
                                v-if="is_upgrade == 0">
                                <div class="member_shop_top_person_body">
                                    <div class="member_shop_top_person_left">
                                        <div class="member_shop_top_person_left_ava">
                                            <img :src="vip.vip_page_logo"
                                                alt="" />
                                        </div>
                                    </div>
                                    <div class="member_shop_top_person_right">
                                        <p>
                                            <span>{{ vip.vip_page_title }}</span>
                                        </p>
                                        <p>
                                            我的邀请码：
                                            <span class="code">V12345</span>
                                            <span class="copy_btn">一键复制</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="index_control index_head"
                                v-show="top_show">
                                <div class="control_item control_sanjiao on"
                                    style="margin-top:70px"
                                    v-show="top_show">
                                    <el-form>
                                        <el-form-item label="标题"
                                            v-if="is_upgrade == 0"
                                            :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-input v-model="vip.vip_page_title"
                                                    @blur="saveTitle"></el-input>
                                            </el-col>
                                        </el-form-item>

                                        <el-form-item label="logo"
                                            v-if="is_upgrade == 0"
                                            :label-width="formLabelWidth"
                                            prop="avatar">
                                            <el-col :span="10">
                                                <el-input v-model="vip.vip_page_logo"
                                                    autocomplete="off"
                                                    @blur="saveLogo"
                                                    class="mar_bottom_5"></el-input>
                                                <uploadpic :piclink="vip.vip_page_logo"
                                                    :width="150"
                                                    :height="150"
                                                    :is_more="false"
                                                    @send_pic="onSuccess"></uploadpic>
                                            </el-col>
                                        </el-form-item>

                                        <el-form-item label="背景图片"
                                            :label-width="formLabelWidth">
                                            <el-col :span="18">
                                                <div class="img_nav"
                                                    style="width:auto;height:auto;margin-top:10px;">
                                                    <uploadpic :piclink="vip.background"
                                                        :width="320"
                                                        :height="'不限'"
                                                        :real_width="640"
                                                        :real_height="'auto'"
                                                        :is_more="false"
                                                        @send_pic="uploadSuccess"></uploadpic>
                                                </div>
                                            </el-col>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div>
                        </div>
                        <div class="member_shop_body"
                            @click="show_part('body')"
                            :style="{ 'background-color': vip.color }">
                            <div class="upgrade_recharge_btn"
                                v-if="is_upgrade == 1">
                                立即购买
                            </div>
                            <div class="member_shop_item"
                                v-else
                                v-for="(item, k) in product"
                                :key="k">
                                <div class="member_shop_item_left">
                                    <img :src="$fnc.getImgUrl(item.piclink)"
                                        alt="" />
                                </div>
                                <div class="member_shop_item_right">
                                    <p>{{ item.title }}</p>
                                    <div v-if="
                      item.sub_title != '' &&
                        item.sub_title != null &&
                        item.sub_title != undefined
                    "
                                        class="member_shop_item_right_recommend">
                                        <p>{{ item.sub_title }}</p>
                                    </div>
                                    <div class="member_shop_item_right_bottom">
                                        <p><span>￥</span>{{ item.price }}</p>
                                        <div class="member_shop_item_right_bottom_btn">
                                            <p>立即抢购</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="index_control index_head"
                                style="margin-top:60px"
                                v-show="shopListShow">
                                <div class="control_item control_sanjiao on">
                                    <el-form>
                                        <el-form-item label="背景颜色："
                                            :label-width="formLabelWidth">
                                            <el-col :span="16"
                                                style="display: flex;
                                                justify-content: center;
                                                align-items: center;">
                                                <el-input v-model="vip.color"
                                                    size="mini"
                                                    autocomplete="off">
                                                </el-input>
                                                <el-color-picker v-model="vip.color"
                                                    size="mini"
                                                    show-alpha
                                                    @active-change="color_now">
                                                </el-color-picker>
                                                <el-button type="primary"
                                                    size="mini"
                                                    style="margin-left:30px;"
                                                    @click="change_color">
                                                    修改</el-button>
                                            </el-col>
                                        </el-form-item>
                                        <!-- <upcard @setId="setId"
                                            class="shop"
                                            :data="product"
                                            @soreProduct='soreProduct'
                                            @sendDel="getSendDel"
                                            :cart="list_item"></upcard> -->
                                    </el-form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import myUpload from "@/components/currency/MyUpload.vue";
import upcard from "@/components/currency/IndexSet_upload.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
    name: "member",
    data () {
        return {
            is_upgrade: 0,
            themeColor: "",
            vip: {
                color: "",
                background: "",
                vip_page_logo: "",
                vip_page_title: ""
            },
            product: [
                {
                    title: ""
                }
            ],
            list_item: "list",
            shopListShow: false,
            top_show: true,
            formLabelWidth: "120px",
        };
    },
    components: {
        HeadTitle,
        myUpload,
        upcard,
        uploadpic
    },
    created () {
        this.getupgrade();
        this.get_member();
    },
    methods: {
        getupgrade () {
            //会员费管理  如果为1 取消编辑升级调剂
            this.$api.getSettings.findConfig({ iden: "vip_mode " }).then(res => {
                if (res.data.code == 200) {
                    this.is_upgrade = res.data.result;
                }
            });
        },
        saveLogo () {
            var params = {};
            params.iden = "vip_page_logo";
            params.value = this.vip.vip_page_logo;
            this.$api.getPage.save_memberlist(params).then(res => {
                if (res.data.code == 200) {
                    this.$fnc.alertSuccess("修改成功");
                } else {
                    this.$fnc.alertError(res.data.result);
                }
            });
        },
        saveTitle () {
            var params = {};
            params.iden = "vip_page_title";
            params.value = this.vip.vip_page_title;
            this.$api.getPage.save_memberlist(params).then(res => {
                if (res.data.code == 200) {
                    this.$fnc.alertSuccess("修改成功");
                } else {
                    this.$fnc.alertError(res.data.result);
                }
            });
        },
        onSuccess (pic) {
            this.vip.vip_page_logo = pic;

            var params = {};
            params.iden = "vip_page_logo";
            params.value = pic;
            this.$api.getPage.save_memberlist(params).then(res => {
                if (res.data.code == 200) {
                    this.$fnc.alertSuccess("修改成功");
                } else {
                    this.$fnc.alertError(res.data.result);
                }
            });
        },
        soreProduct () {
            var sort_str = "";
            this.product.forEach(el => {
                sort_str = sort_str + el.id + "@";
            });
            this.$api.getPage.change_shopsort({ sort_str: sort_str }).then(res => {
                if (res.data.code == 200) {
                }
            });
        },
        show_part (val) {
            switch (val) {
                case "top":
                    this.top_show = true;
                    this.shopListShow = false;
                    break;
                case "body":
                    this.top_show = false;
                    this.shopListShow = true;
                    break;
                default:
                    break;
            }
        },
        color_now (val) {
            this.vip.color = val;
        },
        change_color () {
            var params = {};
            params.iden = "vip_page_background_color";
            params.value = this.vip.color;
            this.$api.getPage.save_memberlist(params).then(res => {
                if (res.data.code == 200) {
                    this.$fnc.alertSuccess("修改成功");
                    this.get_member();
                } else {
                    this.$fnc.alertError(res.data.result);
                }
            });
        },

        getSendDel (obj, index, id) {
            console.log(obj, index, id);
            // this.product.push(obj.id);
            this.$api.getPage.del_shop({ id: obj.id, iden: "vip" }).then(res => { });
        },
        setId (od) {
            this.$api.getPage.change_shop({ id: od, iden: "vip" }).then(res => {
                if (res.data.code == 200) {
                    this.$fnc.alertSuccess("");
                    this.get_member();
                }
            });
        },

        get_member () {
            this.$api.getPage.get_memberlist({}).then(res => {
                if (res.data.code == 200) {
                    this.product = res.data.result.info.product.pro;
                    console.log(res.data.result.info.product.pro);
                    this.vip.background = res.data.result.vip_page_background;
                    this.vip.color = res.data.result.vip_page_background_color;
                    if (res.data.result.vip_page_logo) {
                        this.vip.vip_page_logo = res.data.result.vip_page_logo;
                    }
                    if (res.data.result.vip_page_title) {
                        this.vip.vip_page_title = res.data.result.vip_page_title;
                    }
                }
            });
        },
        uploadSuccess (url) {
            //上传图片

            this.vip.background = url;
            var params = {};
            params.iden = "vip_page_background";
            params.value = url;
            this.$api.getPage.save_memberlist(params).then(res => {
                if (res.data.code == 200) {
                    this.$fnc.alertSuccess("修改成功");
                    this.get_member();
                } else {
                    this.$fnc.alertError(res.data.result);
                }
            });
            this.$message.success("上传成功");
        }
    }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/page.css";
.transitionBody > div {
    overflow: auto;
}
.member_bj {
    background-color: #f3f3f3;
    flex-flow: column;
}
.member_shop_top {
    width: 100%;
    position: relative;
}
.member_shop_top_bj {
    border: 1px solid transparent;
    width: 100%;
}
.member_shop_top_bj img {
    width: 100%;
    display: block;
}
.member_shop_top_person {
    width: 90%;
    height: 65px;
    margin: 0 auto;
    background-color: rgba(38, 38, 38, 0.6);
    border-radius: 40px;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: auto;
}
.member_shop_top_person_body {
    width: 80%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.member_shop_top_person_left {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.member_shop_top_person_left_ava {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.member_shop_top_person_left_ava img {
    max-width: 100%;
    width: 42px;
    height: 42px;
    display: block;
    border-radius: 50%;
}
.member_shop_top_person_right {
    /* width: 80%; */
    height: 42px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 5px;
}
.member_shop_top_person_right p:nth-of-type(1) {
    font-size: 12px;
    color: #ffffff;
}
.member_shop_top_person_right p:nth-of-type(1) span {
    /* padding-left: 10px; */
}
.member_shop_top_person_right p:nth-of-type(2) {
    font-size: 12px;
    color: #939393;
    line-height: 20px;
}
.member_shop_top_person_right p:nth-of-type(2) span:nth-of-type(1) {
    font-size: 12px;
    color: #939393;
    line-height: 20px;
}
.member_shop_top_person_right p:nth-of-type(2) span:nth-of-type(2) {
    font-size: 10px;
    color: #ffffff;
    background-color: #e88800;
    padding: 4px 8px;
    border-radius: 5px;
    margin-left: 10px;
}
.member_shop_body {
    width: 100%;
    background-color: #f3f3f3;
    padding-bottom: 10px;
    position: relative;
    padding: 10px 0;
    border: 1px solid transparent;
}
.member_shop_item {
    width: 95%;
    height: 145px;
    margin: 0 auto 10px auto;
    background-color: #ffffff;
    padding: 8px 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
}
.member_shop_item_left {
    width: 38%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-radius: 10px;
    overflow: hidden;
}
.member_shop_item_left img {
    height: 100%;
}
.member_shop_item_right {
    width: 62%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
}
.member_shop_item_right > p {
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 18px;
    text-align: justify;
}
.member_shop_item_right_recommend {
    width: 100%;
    background-color: #f7f7f7;
    border-radius: 10px;
    padding: 5px 0;
    letter-spacing: 1px;
}
.member_shop_item_right_recommend > p {
    font-size: 12px;
    color: #8a8a8a;
    display: -webkit-box;
    text-align: justify;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0 5px;
    overflow: hidden;
    line-height: 20px;
}
.member_shop_item_right_bottom {
    width: 100%;
    height: 30px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
}
.member_shop_item_right_bottom p {
    font-size: 16px;
    color: #ff083f;
    font-weight: 500;
    line-height: 22px;
}
.member_shop_item_right_bottom p span {
    font-size: 14px;
    color: #ff083f;
    font-weight: bold;
}
.member_shop_item_right_bottom_btn {
    background-color: #d65146;
    padding: 2px;
}
.member_shop_item_right_bottom_btn p {
    font-size: 12px;
    color: #fbefb3;
    padding: 4px 8px;
    border: 1px solid #fbefb3;
    line-height: 14px;
}
.member_shop_top_bj:hover {
    cursor: pointer;
    border: 1px dashed red;
}
.member_shop_body:hover {
    cursor: pointer;
    border: 1px dashed red;
}
.upgrade_top_info {
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 15px;
    left: 17px;
    right: 17px;
    margin: auto;
    > img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    > span:nth-of-type(1) {
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
        margin: 0 5px;
    }
    > span:nth-of-type(2) {
        font-size: 10px;
        color: #cfa25e;
        border: 1px solid #cfa25e;
        border-radius: 15px;
        line-height: 1;
        padding: 2px 5px;
        margin-right: auto;
    }
    > span:nth-of-type(3) {
        font-size: 13px;
        // font-weight: bold;
        color: #d4b77b;
    }
    .van-icon {
        font-size: 14px;
        color: #d4b77b;
        margin-left: 5px;
    }
}
.upgrade_recharge_btn {
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    border-radius: 25px;
    color: #1c1c1c;
    background-color: #e5c188;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
